<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no">
  <link rel="stylesheet" href="./index.css">

  <title>携程clone</title>
</head>

<body>
  <div class="search-box">
    <div class="search">
      <div class="search-index">
        <span>搜索:目的地/酒店/景点/航班号</span>
      </div>
    </div>
    <a href="#" class="login">
      我 的</a>
  </div>
  <div class="slider">
    <img src="./baodi2@v7.15.jpg" alt="">
  </div>
  <div class="local-nav">
    <ul>
      <li>
        <a href="#">
          <span>攻略·景点</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>门票·活动</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>美食林</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>周边游</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>一日游</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="nav-entry-gird">
    <div class="nav-hotel">
      <a href="#">
        <span>酒店</span></a>
      <a href="#">
        <span>民宿·客栈</span></a>
      <a href="#">
        <span>特价·爆款</span></a>
    </div>
    <div class="nav-flight">
      <a href="#">
        <span>机票</span></a>
      <a href="#">
        <span>火车票</span></a>
      <a href="#">
        <span>汽车·船票</span></a>
      <a href="#">
        <span>专车·租车</span></a>
    </div>
    <div class="nav-travel">
      <a href="#">
        <span>旅游</span></a>
      <a href="#">
        <span>私家团</span></a>
      <a href="#">
        <span>邮轮游</span></a>
      <a href="#">
        <span>定制游</span></a>
    </div>

  </div>
  <div class="subnav-entry">
    <ul>
      <li>
        <a href="#">
          <span>自由行</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>WiFi电话卡</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>保险·签证</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>换钞·购物</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>向导·包车</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>特价机票</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>礼品卡</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>申卡·借钱</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>社区</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>更多</span>
        </a>
      </li>
    </ul>
  </div>
  <footer class="tool-box">
    <div class="tool-cn">
      <ul>
        <li>
          <a href="#">
            <span>电话预定</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>下载客户端</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>我的</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="tool-ver"></div>
  </footer>
</body>
<script>
  window.addEventListener('scroll', function(){
    const searchBox =  document.querySelector('.search-box');
    searchBox.classList.toggle('search-bg', window.scrollY > 0);
  })
</script>
</html>